<template>
  <div class="OrganizationFormCom">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>{{fullPath}}</el-breadcrumb-item>
    </el-breadcrumb>

    <ul class="topTable">
      <li class="item">
        <div class="title">机构名称</div>
        <div class="text">{{orgName}}</div>
      </li>
      <li class="item">
        <div class="title">子机构数</div>
        <div class="text">{{sonLevelSize}}</div>
      </li>
    </ul>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>子组织机构列表</el-breadcrumb-item>
    </el-breadcrumb>

    <ul class="bottomTable">
      <li class="item">
        <div class="title">机构名称</div>
        <div class="text">子机构数</div>
      </li>
      <li class="item" v-for="(item, index) in sonLevel.sonLevelList" :key="index">
        <div class="title">{{item.orgName}}</div>
        <div class="text">{{item.sonLevelSize}}</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import { getOrgTreeServiceApi } from "/@/api/personnel/bean/staffinfo"
const props = defineProps({
  ParentQueryParam: {
    type: Object,
    default: () => {}
  }
})
let fullPath = ref("")
let orgName = ref("")
let sonLevelSize = ref("")
let sonLevel: any = reactive({
  sonLevelList: []
})
const OrganizationFormComState = reactive({
  initgetOrgInfo: () => {
    getOrgTreeServiceApi
      .getOrgInfo({ ...props.ParentQueryParam }, null)
      .then((response: any) => {
        sonLevel.sonLevelList = []
        fullPath.value = response.data.fullPath
        orgName.value = response.data.orgName
        sonLevelSize.value = response.data.sonLevelSize
        sonLevel.sonLevelList = response.data.sonLevel
      })
  }
})
onMounted(() => {
  OrganizationFormComState.initgetOrgInfo()
})
defineExpose({
  exposeinitgetOrgInfo: () => OrganizationFormComState.initgetOrgInfo()
})
</script>

<style lang="scss" scoped>
.OrganizationFormCom {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  .el-breadcrumb {
    height: 14px;
    .el-breadcrumb__item {
      ::v-deep .el-breadcrumb__inner {
        font-weight: bold;
      }
    }
  }
  .bottomTable,
  .topTable {
    margin: 20px 0;
    .item {
      display: flex;
      margin-bottom: 1px;
      .title {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: #0e6fb7;
      }
      .text {
        flex: 1;
        height: 50px;
        line-height: 50px;
        border: 1px solid #ccc;
      }
    }
  }
  .bottomTable {
    margin-bottom: 0;
  }
}
</style>
